<template>
  <!-- <div class="boxTwo">
    <h1 class="registerTitle">Welcome to DMS</h1>
    <div>
      <el-form :rules="rules" status-icon ref="regForm" :model="regForm" class="regContainer">
        <div style="margin-top:15px;">
          <h3 style="font-size:36px;">欢迎注册新账号</h3>
        </div>
        <el-button type="text" @click="Login" style="margin-bottom: 0px">已有账号？立即登录</el-button>
        <el-form-item prop="nickname" label="设置昵称">
          <el-input type="text" autocomplete="false" v-model="regForm.nickname" placeholder="请输入昵称"
            style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item prop="mobile" label="电话号码">
          <el-input ref="focusMobile" type="text" autocomplete="false" v-model="regForm.mobile" placeholder="请输入电话号码"
            style="width: 320px"></el-input>
        </el-form-item>
        <el-form-item prop="password" label="设置密码">
          <el-input type="password" autocomplete="false" v-model="regForm.password" placeholder="请设置密码"
            style="width: 320px" show-password></el-input>
        </el-form-item>
        <el-form-item prop="checkPass" label="重复密码">
          <el-input type="password" autocomplete="false" v-model="regForm.checkPass" placeholder="请再次输入密码"
            style="width: 320px" show-password></el-input>
        </el-form-item>
        <el-button type="primary" style="width: 100%; margin-top: 20px; border-radius: 30px" @click="submitRegister">注册
        </el-button>
      </el-form>
    </div>
  </div> -->
  <div class="signinform">
    <!-- container -->
    <div class="mainContainer">
      <!-- main content -->
      <div class="w3l-form-info">
        <div class="w3_info">
          <el-form :rules="rules" status-icon ref="regForm" :model="regForm">
            <div>
              <h3 class="registerTitle">欢迎注册新账号</h3>
            </div>
            <el-button type="text" @click="Login" style="margin-bottom: 0px">已有账号？立即登录</el-button>
            <el-form-item prop="nickname" label="设置昵称">
              <el-input type="text" autocomplete="false" v-model="regForm.nickname" placeholder="请输入昵称"
                style="width: 320px"></el-input>
            </el-form-item>
            <el-form-item prop="mobile" label="电话号码">
              <el-input ref="focusMobile" type="text" autocomplete="false" v-model="regForm.mobile"
                placeholder="请输入电话号码" style="width: 320px"></el-input>
            </el-form-item>
            <el-form-item prop="password" label="设置密码">
              <el-input type="password" autocomplete="false" v-model="regForm.password" placeholder="请设置密码"
                style="width: 320px" show-password></el-input>
            </el-form-item>
            <el-form-item prop="checkPass" label="重复密码">
              <el-input type="password" autocomplete="false" v-model="regForm.checkPass" placeholder="请再次输入密码"
                style="width: 320px" show-password></el-input>
            </el-form-item>
            <el-button type="primary" style="width: 100%; margin-top: 20px; border-radius: 30px"
              @click="submitRegister">注册
            </el-button>
          </el-form>
        </div>
        <div class="w3l_form">
          <div class="left_grid_info">
            <img src="../assets/image.svg" alt="" />
          </div>
        </div>
      </div>
      <!-- //main content -->
    </div>
    <!-- //container -->
    <!-- footer -->
    <div class="footer">
      <p>&copy; 2022 All Rights Reserved | Design by CO.cool</p>
    </div>
    <!-- footer -->
  </div>
</template>

<script>
import md5 from "js-md5";

export default {
  name: "register",
  data() {
    var validateName = (rule, value, callback) => {
      var pat = /([a-zA-Z0-9]|[._-]){4,16}$/;
      if (!pat.exec(value))
        callback(new Error("昵称为4到16位（字母、数字、下划线或减号）"));
      callback();
    };
    var validatePass = (rule, value, callback) => {
      var patrn = /^([a-zA-Z0-9]|[._-]){9,16}$/;
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (!patrn.exec(value))
          callback(
            new Error(
              "1、长度在 6 到 16 个字符且不包含空格 2、不能为9位以下纯数字"
            )
          );
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.regForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      regForm: {
        nickname: "",
        mobile: "",
        pass: "",
        checkPass: "",
        // code: "",
      },
      rules: {
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          {
            min: 4,
            max: 16,
            message: "昵称为4到16位（字母、数字、下划线或减号）",
            trigger: "blur",
          },
          { validator: validateName, trigger: "blur", required: true },
        ],
        mobile: [
          { required: true, message: "请输入电话号码", trigger: "blur" },
          {
            min: 11,
            max: 11,
            message: "请输入正确的电话号码",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 16,
            message:
              "1、长度在 6 到 16 个字符且不包含空格 2、不能为9位以下纯数字",
            trigger: "blur",
          },
          { validator: validatePass, trigger: "blur", required: true },
        ],
        checkPass: [
          { validator: validatePass2, trigger: "blur", required: true },
        ],
        // code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    Login() {
      this.$router.push("/");
    },
    submitRegister() {
      this.$refs.regForm.validate((valid) => {
        if (valid) {
          let salt = "1a2b3c4d";
          let str =
            "" +
            salt.charAt(0) +
            salt.charAt(2) +
            this.regForm.password +
            salt.charAt(5) +
            salt.charAt(4);
          //请求后端接口
          let param = new URLSearchParams();
          param.append("mobile", this.regForm.mobile);
          param.append("nickname", this.regForm.nickname);
          param.append("password", md5(str));
          this.$https({
            method: "post",
            url: "/enroll",
            data: param,
          }).then((res) => {
            console.log(res);
            if (res.data.code == "200") {
              this.$message.success("注册成功！即将跳转到登录页面...");
              //页面跳转
              setTimeout(() => {
                this.$router.replace("/");
              }, 2000);
            } else if (res.data.code === 500215) {
              this.$message.warning(res.data.message);
              this.regForm.mobile = "";
              this.regForm.code = "";
              this.$refs.focusMobile.focus();
            } else if (res.data.code === 500212) {
              this.$message.warning(res.data.message);
              this.regForm.mobile = "";
              this.regForm.code = "";
              this.$refs.focusMobile.focus();
            }
          });
        }
      });
    },
  },
};
</script>

<style scoped>
/* .regContainer {
  border-radius: 15px;
  width: 400px;
  height: 600px;
  padding: 0px 35px 30px 35px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #eaeaea;
  position: absolute;
  margin: auto;
  left: 0px;
  top: 0px;
  bottom: 0px;
  right: 0px;
  box-shadow: 0px 0px 20px #b3afafe8;
} */

.registerTitle {
  margin: 1rem auto 1rem auto;
  text-align: center;
  font-size: 3rem;
  background: linear-gradient(90deg, #dad1f8, #333);
  -webkit-text-fill-color: white;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
}

/* 格式化 */
.signinform {
  width: 100vw;
  justify-content: center;
  display: grid;
  /* grid-template-rows: 1fr auto 1fr; */
  align-items: center;
  /* 背景渐变色 - 原理2 */
  background: linear-gradient(-45deg, #b09ee9, #87bdd1, #a6d0ed, #b2a6e8, #c4b7d7);
  /* 背景尺寸 - 原理3 */
  background-size: 600% 600%;
  /* 循环动画 - 原理4 */
  animation: gradientBG 5s ease infinite;
}

@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.w3_info {
  /* flex-basis: 50%; */
  /* -webkit-flex-basis: 50%; */
  box-sizing: border-box;
  padding: 3rem 3rem;
  background: #fff;
  box-shadow: 2px 9px 49px -17px rgba(0, 0, 0, 0.1);
  min-width: 30rem;
  border-radius: 1rem 0 0 1rem;
}

.left_grid_info {
  padding: 5rem 0;
}

.left_grid_info img {
  max-width: 30rem;
}

.w3l-form-info {
  display: -webkit-box;
  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;
  /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;
  /* TWEENER - IE 10 */
  display: -webkit-flex;
  /* NEW - Chrome */
  display: flex;
  /* NEW, Spec - Opera 12.1, Firefox 20+ */
  margin: 40px 0;
  box-shadow: 2px 9px 49px 10px rgba(0, 0, 0, 0.362);
  border-radius: 1rem;
}


.w3l_form {
  padding: 0px;
  flex-basis: 50%;
  -webkit-flex-basis: 50%;
  background: #dad1f8;
  border-radius: 0 1rem 1rem 0;

}

.mainContainer {
  max-width: 890px;
  margin: 0 auto;
}

.text-pop-up-top {
  font-size: 5rem;
  background: linear-gradient(90deg, #dad1f8, #333);
  -webkit-text-fill-color: white;
  -webkit-background-clip: text;
  -webkit-text-stroke: 5px transparent;
}

/* //简单适配移动端 */
@media screen and (max-width: 450px) {
  .signinform {
    width: 1000px;
    justify-content: center;
    display: grid;
    grid-template-rows: 1fr auto 1fr;
    align-items: center;
    max-height: 100vh;
    /* 背景渐变色 - 原理2 */
    background: linear-gradient(-45deg, #b09ee9, #87bdd1, #a6d0ed, #b2a6e8,
        #c4b7d7);
    /* 背景尺寸 - 原理3 */
    background-size: 600% 600%;
    /* 循环动画 - 原理4 */
    animation: gradientBG 5s ease infinite;
  }

  .w3l-form-info {
    max-height: 85vh;
  }

  .registerTitle {
    margin: 0;
    text-align: center;
    font-size: 3rem;
    background: linear-gradient(90deg, #dad1f8, #333);
    -webkit-text-fill-color: white;
    -webkit-background-clip: text;
    -webkit-text-stroke: 5px transparent;
  }

    .w3_info {
      /* flex-basis: 50%; */
      /* -webkit-flex-basis: 50%; */
      box-sizing: border-box;
      padding: 2rem 2rem;
      background: #fff;
      min-width: 30rem;
      border-radius: 1rem 0 0 1rem;
    }
}
</style>
